<template>
  <view class="content">
      <view class="upload-con">
          <template v-for="(item,index) in imgList">
              <template v-if="item.certImgPath">
                  <view class="upload-box" @tap.stop="previewImg(item.certImgPath)" :key="index">
                      <view class="flex-center">
                          <image :src="item.certImgPath" mode="aspectFit" />
                      </view>
                      <view class="close-area flex-center bg-white" @tap.stop="removeImg(index)">
                          <text class="iconfont">&#xe615;</text>
                      </view>
                  </view>
              </template>
          </template>
          <template v-if="imgList.length < 6">
              <view class="upload-box" @tap.stop="uploadImg">
                  <image src="https://picture.youjiahu.com/mp_app/client/images/server/addimg.png"></image>
              </view>
          </template>
      </view>
<!--        <view class="bottom-box bg-white">-->
<!--            <text class="padding-20 font-small">建议上传相关证明（例如处方，病例，病灶状况等），请最少上传1张清晰的图片，最多6张</text>-->
<!--            <button @tap="getImgs">确定</button>-->
<!--        </view>-->
  </view>
</template>

<script>
  import { simpleUploadImg } from '@/static/js/upload'
  export default {
      name:'upload-pic',
      props: {
          defaultList:[],
          list:{
              type: Array,
              default: []
          },
      },
      model: {
          prop: 'list',
          event: 'change'
      },
      watch:{
          defaultList(val){
             this.imgList = [...val]
             this.$emit('input', this.imgList)
         }
      },
      data() {
          return {
              imgList: [],
          }
      },
      onShow() {
          this.imgList = this.list
      },
      mounted() {
          if (this.defaultList.length){
              this.imgList = [...this.defaultList]
              this.$emit('input', this.imgList)
          }
      },
      methods: {
          uploadImg() {
              simpleUploadImg('/admin/file/upload/link',{
                  resType: '1111'
              }).then(response => {
                  let data = JSON.parse(response.data)
                  if(data.code == 0){
                      if(data.data){
                          let item = {
                              certImgPath: data.data
                          }
                          this.imgList.push(item)
                          this.$emit('input', this.imgList)
                      }else{
                          uni.showToast({title:'上传失败!!! :: '+response.data, icon:'none',duration:5000})
                      }
                  }else{
                      if(response.statusCode == 401){
                        uni.showModal({
                          title: '提示',
                          content: '需要登录才能继续操作',
                          success(res) {
                            // 保存页面信息 用于回跳
                            let pages = getCurrentPages();
                            if(pages.length){
                              uni.setStorageSync('loginNavigateBack', pages.length)
                            }
                            uni.navigateTo({
                              url: '/pages/login/index'
                            })
                          }
                        })
                      }else{
                        uni.showToast({title:'网络不稳定，请稍后再试!! :'+response.statusCode+': '+response.data, icon:'none', duration:5000})
                        console.log('用户取消上传或上传失败',response)
                      }
                  }
              }).catch(e => {
                if(e.message == 'ChooseImage Size Null'){
                  uni.showToast({title:'图片大小为空',icon:'none'})
                }else if(e.message == 'ChooseImage Size Fail'){
                  uni.showToast({title:'图片不能大于10M',icon:'none'})
                }else if(e.message == 'ChooseImage Fail'){
                      console.log('用户取消上传')
                }else{
                    uni.showToast({title:'上传失败！',icon:'none'})
                    console.log(e)
                }
              })
          },
          previewImg(img) {
              uni.previewImage({
                  urls: [ img ]
              })
          },
          removeImg(idx) {
              this.imgList.splice(idx,1)
              this.$emit('input', this.imgList)
          }
      },
  }
</script>

<style lang="scss">
  .content{
  }
  .upload-con{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .upload-box{
          width: 158rpx;
          height: 158rpx;
          background-color: #e9e9e9;
          border-radius: 10rpx;
          margin: 10rpx;
          position: relative;
          .close-area{
              color: #ff6361;
              position: absolute;
              border: 2px solid;
              border-radius: 50%;
              padding: 4rpx;
              right: -14rpx;
              top: -14rpx;
              width: 24rpx!important;
              height: 24rpx!important;
              .iconfont{
                  font-size: 38rpx;
              }
          }
          .upload-icon{
              font-size: 70rpx;
          }
          .flex-center{
              width: 158rpx;
              height: 158rpx;
          }
          image{
              width: 100%;
              height: 100%;
          }
      }
  }
  .bottom-box{
      position: fixed;
      bottom: 0;
      left: 0;
      height: 200rpx;
      border-top: 1px solid #eee;
      z-index: 99;
      .font-small{
          display:block;
          font-size: 24rpx;
      }
  }
</style>
